<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第二天 数据驱动视图</title>
</head>
<body>
	<div id='app'></div>
	<script src="./node_modules/vue/dist/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		//全局组件
		//第一个参数是组件名称 第二个是组件内容
		//1.Parent 2.Chlid
		// 父-->子
		//1.先给父组件中绑定自定义的属性
		//2.在子组件中使用props接收父组件传递的数据
		//3.可以在子组件中任意使用
		//
		//子-->父
		//1.在父组件绑定自定义的事件
		//2.在子组件中触发原生事件 在函数中$emit触发自定义的childHandler
		//
		Vue.component('Parent',{
			data(){
				return{
					msg:'我是父组件的属性'
				}
			},
			template:`<div>
				<p>我是父组件</p>
				<Child :childData='msg' @childHandler='childHandler'/>
			</div>`,
			methods:{
				childHandler(val){
					console.log(val)
				}
			}
		});

		Vue.component('Child',{
			data(){
				return {
					test:''
				}
			},
			template:`<div>
						<p>我是子组件</p>
						<input type="text" v-model='childData' @input='changeValue(test)'/>
					  </div>`,
			props:['childData'],
			methods:{
				changeValue(val){
					//自定义的事件一定通过$emit()去触发
					//$emit(自定义的事件名，消息)
					this.$emit('childHandler',val)
				}
			}
		});

		let App={
			template:`<div>
						<Parent/>
					  </div>`
		};

		new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			components:{
				App
			},
			template:`<App/>`

		})
	</script>
</body>
</html>
